<!-- 页面 -->
<template>
    <div class="di">
        <ul>
            <li :class="index == 0 ? 'red' : ''" @click="shou()" class="el-icon-s-home">首页</li>
            <li :class="index == 1 ? 'red' : ''" @click="fen()" class="el-icon-menu">分类</li>
            <li :class="index == 2 ? 'red' : ''" @click="gou()" class="el-icon-shopping-cart-2">购物车</li>
            <li :class="index == 3 ? 'red' : ''" @click="ge()" class="el-icon-s-custom">个人</li>
        </ul>
    </div>
</template>
<!-- vue -->
<script>
export default {
    props: [
        'index'
    ],
    data() {
        return {
            // 声明的属性
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
        shou() {
            this.$router.push('/shou')
        },
        fen() { 
            this.$router.push('/fen')
        },
        gou() {
            this.$router.push('/gou')
         },
        ge() { 
            this.$router.push('/ge')
        },
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.di ul li {
    width: 25%;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
}

.red {
    color: red;
}
</style>